import { defineStore } from "pinia";
import { store } from '@/store'

interface IUserState {
    menus: IMenusItem[];
}
interface INavMenu {
    id: number;
    title: string;
    parentId: number;
    hidden: 0 | 1;
    icon: string;
    name: string;
    childMenus?: INavMenu[]
}


export const useUserStore = defineStore('userStore', {
    state(): IUserState {
        return {
            menus: []
        }
    },
    getters: {
        genMenusConf(state) {
            // 方式一
            // const navMenus: INavMenu[] = [];
            // 方式二   数组是有序的，对象时无序的(也是可以遍历的)，因此将navMenus设为对象的话，后面就不需要筛选了，数组的话不筛选就会有很多undefined
            const navMenus: { [i: string]: INavMenu } = {};
            state.menus.forEach((item) => {
                if (item.parentId === 0) {
                    // 一级权限对象
                    navMenus[item.id] = { ...item, childMenus: navMenus[item.id]?.childMenus }//浅拷贝(因为item里面的数据都是值类型) =>改变引用地址  否则会影响原来state里面的menus的数据
                } else {
                    // 二级权限对象 添加到对应的一级对象的childMenu中
                    navMenus[item.parentId] ??= {} as INavMenu;
                    navMenus[item.parentId].childMenus ??= []
                    navMenus[item.parentId].childMenus?.push(item)
                }

            })
            // 方式一
            // return navMenus.filter((item) => item);
            // 方式二
            return navMenus

        }
    },
    actions: {
        updateMenus(curMenus: IMenusItem[]) {
            this.menus = curMenus
        }
    }
})


// 如果是vue以外的文件访问userStore的数据   就用useUserStoreOutside
export const useUserStoreOutside = () => useUserStore(store)
